import React, { useState, useEffect, Component } from 'react'
import axios from 'axios';
import { Input, Button } from 'antd'

export default () => {
  let [authcode, setAuthCode] = useState('')
  let [username, setUsername] = useState('')
  let [password, setPassword] = useState('')
  let [authText, setAuthText] = useState('')
  useEffect(() => {
    // 前端获取验证码接口
    axios.get('/api/authCode').then(res => {
      console.log(res, 'res')
      // 前端设置验证码
      setAuthCode(res.data.svg)
    })
  }, [])
  return (
    <div>
      账号：<Input style={{ width: '300px' }} value={username} onChange={e => setUsername(e.target.value)} /> <br />
      密码：<Input style={{ width: '300px' }} value={password} onChange={e => setPassword(e.target.value)} /> <br />
      <Input style={{ width: '100px' }} value={authText} onChange={e => setAuthText(e.target.value)} />
      <span
        dangerouslySetInnerHTML={{ __html: authcode }}
        style={{ width: '100px', height: '50px' }}>
      </span><br />

      <Button onClick={() => {
        // 前端登陆接口
        axios.post('/api/login', {
          username,
          password,
          authText
        }).then(res => {
          console.log(res, 'res')
        })
      }}>登陆按钮</Button>
    </div>
  )
}
